<template>
  <div class="form">
    <van-form @submit="submit">
      <van-field
        v-model="info.form.phone"
        name="phone"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern, message: '手机号格式错误' },
        ]"
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="info.form.name"
        name="name"
        :rules="[{ required: true, message: '请填写姓名' }]"
        label="姓名"
        placeholder="请输入姓名"
      />
      <van-field
        v-model="info.form.bank"
        name="bank"
        :rules="[{ required: true, message: '请填写开户银行' }]"
        label="开户银行"
        placeholder="请输入开户银行"
      />
      <van-field
        v-model="info.form.branch"
        name="branch"
        :rules="[{ required: true, message: '请填写开户支行' }]"
        label="开户支行"
        placeholder="请输入开户支行"
      />
      <van-field
        v-model="info.form.card"
        name="card"
        :rules="[
          { required: true, message: '请填写银行卡号' },
          { validator, message: '银行卡号格式错误' },
        ]"
        label="银行卡号"
        placeholder="请输入银行卡号"
      />
      <van-field
        v-model="info.form.code"
        name="code"
        :rules="[{ required: true, message: '请填写验证码' }]"
        label="验证码"
        style="line-height: 38px"
        placeholder="请输入验证码"
      >
        <template #button>
          <van-button
            class="codeFn"
            size="small"
            type="primary"
            @click="setCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div style="margin: 30px">
        <van-button round block class="button" type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, onMounted } from "vue";
import { getPayment, setPaymentCard } from "../../../../api/http.js";
import smsSend from "@/views/public/smsSend";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const pattern = /^1[3-9]\d{9}$/;
    const info = reactive({
      form: {
        username: "",
        code: "",
        phone: "",
      },
    });
    const validator = (val) => {
      return /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/.test(val);
    };
    const submit = async (values) => {
      values = {
        ...values,
        id: info.form.id,
        type: info.form.type,
      };
      console.log(values);
      const data = await setPaymentCard(values);
      data.code === 200
        ? proxy.$toast.success(data.msg)
        : proxy.$toast.fail(data.msg);
    };

    const getInfo = async () => {
      const data = await getPayment({ type: 3 });
      info.form = { ...data.data };
      console.log("data---", info.form);
    };

    onMounted(() => {
      getInfo();
    });

    const setCode = () => {
      if (info.form.phone == "") return proxy.$toast.fail("请填写手机号");
      smsSend(info.form.phone, 3);
    };

    return {
      submit,
      setCode,
      info,
      validator,
      pattern,
    };
  },
});
</script>

<style lang="less" scoped>
.form {
  padding: 20px 3%;

  /deep/ .van-cell {
    background-color: transparent;
    font-size: 1rem;
    line-height: 32px;
  }
  /deep/ .van-field__label {
    color: var(--textColor);
  }
  /deep/ .van-field__control {
    color: var(--textColor);
  }

  /deep/ .van-field__button {
    margin-top: -8px;
  }

  .codeFn {
    background-color: transparent;
    color: #d8b88c;
    border: 1px solid #d8b88c;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-radius: 15px;
    padding: 0 15px;
  }
  .button {
    height: 45px;
    background: #d8b88c;
    border-radius: 50px;
    font-size: 1.1rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 45px;
    border: none;
  }
}
</style>
